<template>
  <div class="tools-container">
    <div class="header-right">
      <el-tooltip content="主题切换" placement="bottom">
        <el-button circle size="small" @click="toggleTheme" v-if="theme === 'light'">
          <template #icon><el-icon>
              <Sunny />
            </el-icon></template>
        </el-button>
        <el-button circle size="small" @click="toggleTheme" v-else>
          <template #icon><el-icon>
              <Moon />
            </el-icon></template>
        </el-button>
      </el-tooltip>
      <el-tooltip content="布局切换" placement="bottom">
        <el-dropdown trigger="click">
          <el-button circle size="small">
            <template #icon><el-icon>
                <Grid />
              </el-icon></template>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="switchLayout('vertical')">垂直布局</el-dropdown-item>
              <el-dropdown-item @click="switchLayout('horizontal')">水平布局</el-dropdown-item>
              <el-dropdown-item @click="switchLayout('hybrid')">混合布局</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-tooltip>
      <el-tooltip content="全屏" placement="bottom">
        <el-button circle size="small" @click="toggleFullscreen">
          <template #icon>
            <el-icon>
              <FullScreen />
            </el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip :content="sidebarHidden ? '显示侧边栏' : '隐藏侧边栏'" placement="bottom">
        <el-button circle size="small" @click="toggleSidebar">
          <template #icon><el-icon v-if="sidebarHidden">
              <Fold />
            </el-icon><el-icon v-else>
              <Expand />
            </el-icon></template>
        </el-button>
      </el-tooltip>
      <el-tooltip :content="logoHidden ? '显示Logo' : '隐藏Logo'" placement="bottom">
        <el-button circle size="small" @click="toggleLogo">
          <template #icon><el-icon v-if="logoHidden">
              <View />
            </el-icon><el-icon v-else>
              <Hide />
            </el-icon></template>
        </el-button>
      </el-tooltip>
      <el-dropdown trigger="click" class="user-dropdown">
        <span class="user-info">
          <el-avatar :size="24" icon="User" />
          <span class="user-name">管理员</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useLayoutStore } from '@/store/layout'
import {
  FullScreen,
  Moon,
  Grid,
  Expand,
  Fold,
  Sunny,
  Hide,
  View
} from '@element-plus/icons-vue'

const layoutStore = useLayoutStore()

// 计算属性

const logoHidden = computed(() => layoutStore.layoutSettings.logoHidden)
const theme = computed(() => layoutStore.layoutSettings.theme)
const sidebarHidden = computed(() => layoutStore.layoutSettings.sidebarHidden)

// 方法
const toggleSidebar = () => {
  layoutStore.toggleSidebar()
}

const toggleLogo = () => {
  layoutStore.toggleLogo()
}

const toggleTheme = () => {
  layoutStore.toggleTheme()
}

const toggleFullscreen = () => {
  layoutStore.toggleFullscreen()
}

const switchLayout = (type: 'vertical' | 'horizontal' | 'hybrid') => {
  layoutStore.toggleLayoutType(type)
}
</script>

<style scoped lang="scss">
// 头部样式
.tools-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 15px;

  .header-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 15px;

    .user-dropdown {
      margin-left: 15px;

      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;

        .user-name {
          margin-left: 5px;
        }
      }
    }

    .el-button {
      margin-left: 10px;
    }
  }
}
</style>